<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>患者安全管理（医务科）</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content" style="padding-top: 90px;">
        <div class="header-section">
            <div class="form-horizontal" >
                <div class="form-group" style="margin-top: 10px;margin-bottom: 0px;padding-top: 10px;">
                    <label class="control-label col-md-3">选择日期</label>
                    <div class="col-md-4">
                        <div class="input-group input-large custom-date-range">
                            <input type="text" class="form-control dpd1" name="from" id="startTime"
                                   data-date-format="yyyy-mm-dd">
                            <span class="input-group-addon">至</span>
                            <input type="text" class="form-control dpd2" name="to" id="endTime"
                                   data-date-format="yyyy-mm-dd">
                        </div>
                        <span class="help-block">请选择一个日期范围</span>
                    </div>
                    <button class="btn btn-primary" onclick="searchData()">查询</button>
                </div>
            </div>

        </div>
        <!--body wrapper start-->
        <div class="wrapper">

            <div th:class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            患者安全管理
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>

                        <div class="panel-body">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">住院患者出院当天再住院率</span>
                                            <h3 id="inRegAgainRate"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">患者出院2-31天内再住院率</span>
                                            <h3 id="inMonthRegAgainRate"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">不良事件上报总例数</span>
                                            <h3 id="totalCount"></h3>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">压疮发生</span>
                                            <h3 id="pressureSores"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">跌倒/坠床发生</span>
                                            <h3 id="fall"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">人工气道意外脱出例数</span>
                                            <h3 id="airwayProlapse"></h3>
                                        </div>
                                        <div class="col-sm-3 p-states">
                                            <span class="state-title">择期手术后并发症总例数</span>
                                            <h3 id="operationCount"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </section>
                </div>

            </div>

            <!--body wrapper end-->


        </div>
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<script type="text/javascript">
    $(document).ready(function () {
        $('#startTime').val(getDay(-30));
        $('#endTime').val(getDay(0));
        searchData();
    });

    function searchData() {
        let startTime = $('#startTime').val();
        let endTime = $('#endTime').val();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getSafeManagement",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    $('#inRegAgainRate').text(toPercent(result.inRegAgainRate));
                    $('#inMonthRegAgainRate').text(toPercent(result.inMonthRegAgainRate));
                    $('#pressureSores').text(result.pressureSores);
                    $('#fall').text(result.fall);
                    $('#airwayProlapse').text(result.airwayProlapse);
                    $('#operationCount').text(result.operationCount);
                    $('#totalCount').text(result.totalCount);

                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + JSON.parse(errorMsg));

            }
        });//end ajax
    }
</script>
</body>